<template>
    <div class="profile">
        <v-container fluid class="profile-container">
            <v-row>
                <v-col cols="12" sm="12" md="3" lg="3" xl="3" class="profile-left">
                    <!-- 头像 -->
                    <v-avatar size="180px" class="profile-left-avatar" elevation="4">
                        <!-- <img class="profile-left-avatar-kuang" src="@/assets/images/logokuang.png" alt="John"> -->
                    </v-avatar>
                    <!-- 坐标等信息 -->
                    <v-card hover class="profile-left-desc">
                        <div class="profile-left-desc-item" v-for="(item, index) in profileLeftDesc" :key="index">
                            <v-icon class="profile-left-desc-item-icon" :icon=item.icon></v-icon>
                            <span class="profile-left-desc-item-span">{{ item.text }}</span>
                        </div>
                    </v-card>
                    <!-- 兴趣爱好 -->
                    <v-card hover class="profile-left-tag">
                        <v-chip v-for="(item, index) in profileLeftTag" :key="index" :prepend-icon="item.icon"
                            :color="item.color">{{ item.text }}</v-chip>
                    </v-card>
                    <!-- 时间线 -->
                    <v-card hover class="profile-left-timeline">
                        <v-card-text>
                            <div class="font-weight-bold ms-1 mb-2">Now</div>

                            <v-timeline TimelineAlign="start" density="compact" class="timeline">
                                <v-timeline-item v-for="item in profileLeftTimeline" :key="item.time"
                                    :dot-color="item.color" size="10">
                                    <div class="mb-4">
                                        <div class="font-weight-normal">
                                            <strong>{{ item.desc }}</strong> @{{ item.time }}
                                        </div>

                                    </div>
                                </v-timeline-item>
                            </v-timeline>
                        </v-card-text>
                    </v-card>

                </v-col>
                <v-col cols="12" sm="12" md="9" lg="9" xl="9" class="profile-right">
                    <!-- 头像 -->
                    <v-avatar size="180px" class="profile-right-avatar" elevation="4">
                        <!-- <img class="profile-left-avatar-kuang" src="@/assets/images/logokuang.png" alt="John"> -->
                    </v-avatar>
                    <!-- 自我介绍 -->
                    <div class="profile-right-hello">Hello I' m
                        <span class="gradientText">欧皇Ben</span>
                    </div>
                    <div class="profile-right-desc">👦 <span class="purpleText">Full Stack </span>Test
                        and
                        Development Engineer
                    </div>
                    <div class="profile-right-desc">📝 <span class="purpleText textBackground">Life</span> is
                        short, you need <span class="purpleText textBackground">Python</span>。</div>

                    <!-- 联系方式 -->
                    <div class="profile-right-iconContainer">
                        <a class="profile-right-iconItem" target="_blank" @click="openGitHub">
                            <v-icon class="profile-right-icon">mdi-github</v-icon>
                            <span class="profile-right-iconTip">GitHub</span>
                        </a>
                        <a class="profile-right-iconItem" target="_blank" @click="openGitee">
                            <v-icon class="profile-right-icon">mdi-google</v-icon>
                            <span class="profile-right-iconTip">Gitee</span>
                        </a>
                        <a class="profile-right-iconItem" @click="handleClick" href="">
                            <v-icon class="profile-right-icon">mdi-wechat</v-icon>
                            <span class="profile-right-iconTip">WeChat</span>
                        </a>
                        <a class="profile-right-iconItem" href="tel:13823417742">
                            <v-icon class="profile-right-icon">mdi-cellphone</v-icon>
                            <span class="profile-right-iconTip">Phone</span>
                        </a>
                        <a class="profile-right-iconItem" href="mailto:329189987@qq.com">
                            <v-icon class="profile-right-icon">mdi-email-outline</v-icon>
                            <span class="profile-right-iconTip">Mail</span>
                        </a>
                        <a class="profile-right-iconItem copyRight" href="https://github.com/ZYYO666/homepage"
                            target="_blank">
                            <v-icon class="profile-right-icon">mdi-copyright</v-icon>
                            <span class="profile-right-iconTip">原创出处</span>
                        </a>
                    </div>

                    <!-- 贪吃蛇 -->
                    <div class="profile-right-tanChiShe">
                        <img id="tanChiShe" src="@/assets/svg/snake-Light.svg" alt="">
                    </div>


                    <!-- 项目 -->
                    <div class="profile-right-title">
                        <v-icon class="profile-right-title-icon">mdi-animation</v-icon>Projects
                    </div>

                    <!-- 使用 v-for 循环创建多个 v-card -->
                    <div class="profile-right-project">
                        <v-col v-for="card in profileRightProject" :key="card.title" cols="12" sm="5" md="5" lg="5"
                            xl="5" class="mx-2 profile-right-project-item">
                            <div>
                                <v-hover v-slot="{ isHovering, props }">
                                    <v-card class="mx-auto" v-bind="props" @click="openWebPage(card.url)">
                                        <v-img :src="card.img"></v-img>

                                        <v-card-text>
                                            <h2 class="text-h6 text-primary">
                                                {{ card.title }}
                                            </h2>
                                            {{ card.desc }}
                                        </v-card-text>

                                        <v-card-title>
                                            <v-rating :model-value="5" background-color="orange" class="me-2"
                                                color="orange" dense hover></v-rating>
                                            <span class="spanText text-primary text-subtitle-2">{{ card.watch }}
                                                Watch</span>
                                        </v-card-title>

                                        <v-overlay :model-value="isHovering" class="align-center justify-center"
                                            scrim="#036358" contained>
                                            <v-btn variant="flat" @click="openWebPage(card.url)">了解更多</v-btn>
                                        </v-overlay>
                                    </v-card>
                                </v-hover>
                            </div>
                        </v-col>
                    </div>
                    <!-- 技能 -->
                    <div class="profile-right-title">
                        <v-icon class="profile-right-title-icon">mdi-flash</v-icon>Skills
                    </div>
                    <div class="profile-right-svg">
                        <img class="profile-right-svg-img" v-for="(item, index) in profileRightSvg" :key="index"
                            :src="item.url" :alt="item.skillName" :title="item.skillName">
                    </div>
                </v-col>
            </v-row>
        </v-container>
    </div>
    <v-dialog v-model="fullscreenDialog" class="dialog">
        <div class="dialog-container">
            <img class="dialog-img" src="@/assets/images/wechat.jpg" alt="">
        </div>
    </v-dialog>
</template>

<script>
export default {
    data() {
        return {
            fullscreenDialog: false,
            tabBgColor: false,
            profileLeftDesc: [{
                icon: 'mdi-map-marker-radius',
                text: 'Guangzhou, China'
            }, {
                icon: 'mdi-briefcase-variant',
                text: '油途OilTour'
            }],
            profileLeftTag: [
                {
                    icon: "mdi-keyboard-variant",
                    color: "black",
                    text: "写代码"
                }, {
                    icon: "mdi-notebook",
                    color: "#8B4513",
                    text: "学习"
                }, {
                    icon: "mdi-baby-carriage",
                    color: "#FF1493",
                    text: "遛娃"
                }, {
                    icon: "mdi-food-turkey",
                    color: "orange",
                    text: "美食"
                }, {
                    icon: "mdi-gamepad",
                    color: "blue",
                    text: "炉石传说"
                }, {
                    icon: "mdi-television-classic",
                    color: "#9C27B0",
                    text: "煲剧"
                }],

            profileLeftTimeline: [{
                time: '2024-08',
                desc: '敬请期待！'
            }, {
                time: '2024-07-31',
                desc: '管理后台初版'
            }, {
                time: '2024-07-15',
                desc: '接口文档初版'
            }, {
                time: '2024-06-28',
                desc: '网站CI/CD完成'
            }, {
                time: '2024-06-26',
                desc: '个人主页完成'
            }, {
                time: '2024-06-14',
                desc: '个人网站上线'
            }, {
                time: '2024-06-13',
                desc: 'ICP备案通过'
            }, {
                time: '2024-06-01',
                desc: '故事的开始~'
            }],


            profileRightSvg: [{
                skillName: "docker",
                url: null
            }, {
                skillName: "git",
                url: null
            }, {
                skillName: "gitHub",
                url: null
            }, {
                skillName: "html5",
                url: null
            }, {
                skillName: "idea",
                url: null
            }, {
                skillName: "java",
                url: null
            }, {
                skillName: "javaScript",
                url: null
            }, {
                skillName: "linux",
                url: null
            }, {
                skillName: "markDown",
                url: null
            }, {
                skillName: "mySql",
                url: null
            }, {
                skillName: "nginx",
                url: null
            }, {
                skillName: "nodeJs",
                url: null
            }, {
                skillName: "postMan",
                url: null
            }, {
                skillName: "ps",
                url: null
            }, {
                skillName: "python",
                url: null
            }, {
                skillName: "redis",
                url: null
            }, {
                skillName: "sqlite",
                url: null
            }, {
                skillName: "svg",
                url: null
            }, {
                skillName: "vite",
                url: null
            }, {
                skillName: "vsCode",
                url: null
            }, {
                skillName: "vue",
                url: null
            }],
            profileRightProject: [{
                title: '个人网站 ohben.cn',
                desc: '作为全栈开发者，我致力于构建创新的软件解决方案。我的网站记录了我的技术旅程，包括项目案例、源码分享和个人技术博客。',
                img: 'https://img.zcool.cn/community/01e1fc5f99279e11013ee04d8af816.jpg',
                url: 'https://gitee.com/afraidbenq/vue-base',
                watch: '99'
            }, {
                title: 'pytest接口自动化测试框架',
                desc: '公司里投入产出比最高的测试项目，经改良后实现真正意义上的全自动测试，核心功能包括实时同步、高效的测试数据管理、持续集成。',
                img: 'https://img1.baidu.com/it/u=895404742,2160157821&fm=253&fmt=auto&app=120&f=JPEG?w=1017&h=500',
                url: 'https://gitee.com/afraidbenq/InterfaceTest',
                watch: '99'
            }, {
                title: 'Appium自动化测试框架',
                desc: '手机UI自动化项目，专注于安卓系统，实现无线、多设备、高容错、分布式的自动化控制，不局限于测试，探索无限可能。',
                img: 'https://ceshiren.com/uploads/default/original/3X/a/6/a68cbdca2485879da3db7a84cb5894b7eac63675.jpeg',
                url: 'https://gitee.com/afraidbenq/AppiumProject',
                watch: '99'
            }, {
                title: '量化交易系统',
                desc: '基于Python开发的覆盖数据源、数据处理、数据可视化、模型开发、策略回测、实盘执行交易决策的自动化交易系统。',
                img: 'https://img2.baidu.com/it/u=1047155210,885202664&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500',
                url: 'https://gitee.com/afraidbenq/GProject',
                watch: '99'
            }],

        }
    },
    methods: {
        handleClick(event) {
            event.preventDefault(); // 阻止链接的默认跳转行为
            // console.log('点击了微信');
            this.fullscreenDialog = true; // 打开全屏遮罩层
        },
        openWebPage(purl) {
            // 替换下面的 URL 为你想要打开的网页地址
            const url = purl;
            window.open(url, '_blank'); // '_blank' 表示在新标签页中打开网页
        },
        openGitHub() {
            setTimeout(() => {
                if (confirm('在“新窗口”中打开GitHub？')) {
                    window.open('https://github.com/afraidbenq', '_blank');
                }
                return false;
            }, 200);
        },
        openGitee() {
            setTimeout(() => {
                if (confirm('在“新窗口”中打开Gitee？')) {
                    window.open('https://gitee.com/afraidbenq', '_blank');
                }
                return false;
            }, 200);
        },
    },
    // 异步加载svg文件 vite es6模块下只能使用动态导入，此为最优解
    async created() {
        for (let item of this.profileRightSvg) {
            const module = await import(`@/assets/svg/${item.skillName}.svg`);
            item.url = module.default;
        }
    }

}
</script>

<style scoped>
html,
body {
    overflow-x: hidden;
}

.profile {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    font-family: "b", "a", sans-serif;
    background: linear-gradient(550deg, #a2d1ff, #ffffff);
    /* background: linear-gradient(50deg, #ffffff, #a2d1ff); */
    /* 背景为图片的属性 */
    /* background: url(@/assets/images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; */
    transition: color 0.1s ease;
    justify-content: center;
    /* color: #eeeeee; */

}

.profile-container {
    width: 100%;
    max-width: 1280px;
    transition: transform 0.5s ease;
    position: relative;
    display: flex;
    flex-direction: row;
}

.profile-left {
    /* overflow-y:scroll; */
    width: 230px;
    /* width: 100%; */
    height: 100vh;
    display: flex;
    padding: 0 15px;
    /* position: fixed;  */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 子元素排列方向为垂直 */
    /* border: 2px dotted #e41f1f; */

}

/* 头像样式 */
.profile-left-avatar {
    flex-shrink: 0;
    /* 子元素不缩放 */
    width: 90%;
    position: relative;
    aspect-ratio: 1;
    /* 元素的宽度等于元素的高度 */
    margin-top: 30px;
    background-size: cover;
    border-radius: 15px;
    border: 1.5px solid #ffffff;
    background-image: url('@/assets/images/avatar.jpg');


}

.profile-left-avatar-kuang {
    position: absolute;
    top: -27%;
    left: -10%;
    width: 120%;
    aspect-ratio: 1;
}

.v-card {
    border-radius: 13px;
    /* 调整圆角大小 */
}

.profile-left-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;

    flex-shrink: 0;
    width: 100%;
    max-width: 210px;
    margin-top: 15px;
    padding: 20px;
    backdrop-filter: blur(0px);
    /* background: #ffffff; */
    background-color: rgba(255, 255, 255, 0.4);
    /* 白色背景，50% 透明度 */

}

.profile-left-desc-item {
    display: flex;

}

.profile-left-desc-item-icon {
    margin-right: 10px;
}

.profile-left-desc-item-span {
    /* font-size: 20px; */
}

.profile-left-tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 14px;
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
    max-width: 210px;
    margin-top: 15px;
    padding: 20px;
    backdrop-filter: blur(0px);
    /* background: #ffffff; */
    background-color: rgba(255, 255, 255, 0.3);
    /* 白色背景，50% 透明度 */
}

.profile-left-timeline {
    flex-shrink: 0;
    width: 100%;
    max-width: 210px;
    margin-top: 15px;
    padding: 20px;
    backdrop-filter: blur(0px);
    /* background: #ffffff; */
    background-color: rgba(255, 255, 255, 0.2);
    /* 白色背景，50% 透明度 */
}

.timeline {
    height: 300px;
    /* 根据需要设置高度 */
    overflow-y: scroll;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 11+ */
}

.profile-right {
    width: calc(100% - 230px);
    /* width: 100%; */
    padding: 20px;
    padding-bottom: 50px;
    position: relative;
    display: flex;
    float: right;
    flex-direction: column;
}

.profile-right-avatar {
    flex-shrink: 0;
    width: 40%;
    /* margin-top: 30px; */
    position: relative;
    max-width: 200px;
    aspect-ratio: 1;
    background-size: cover;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background-image: url('@/assets/images/avatar.jpg');
}

/* 自我介绍 */
.profile-right-hello {
    font-size: 65px;
    font-weight: 800;
    margin: 20px 0;
}

.gradientText {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
    background-position: 0%;
    animation: backgroundSizeAnimation 10s ease-in-out infinite;
    background-image: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%)
}

@keyframes backgroundSizeAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.profile-right-desc {
    margin-top: 7px;
    font-size: 26px;
}

.purpleText {
    color: #747bff;
    font-weight: 800;
}

.textBackground {
    font-weight: 800;
    background: rgb(196 217 251);
    border-radius: 5px;
    font-size: 17px;
    margin: 0 3px;
    padding: 2px 4px;
}

/* icon栏 */
.profile-right-iconContainer {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    /* margin-left: 12px; */
    margin-top: 20px;
    /* padding: 20px 0px; */

}

/* 每个iconItem的样式 */
.profile-right-iconItem {
    width: 49px;
    height: 43px;
    box-sizing: border-box;
    border-radius: 7px;
    display: flex;
    margin-left: 10px;
    backdrop-filter: blur(0px);
    background: rgba(249, 250, 251, 0.5);
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;

    text-decoration: none;
}

/* 每个icon的样式 */
.profile-right-icon {
    width: 22px;
    height: 22px;
    /* fill: var(#ffffff); */
    color: #000000;
    font-size: 22px;
    margin-right: 3px;
}

.profile-right-iconTip {
    white-space: nowrap;
    color: #000000;
    display: none;
}

/* 鼠标悬停时，显示提示文字 */
.profile-right-iconItem:hover {
    width: 90px;
}

.profile-right-iconItem:hover .profile-right-iconTip {
    display: block;
}


.profile-right-tanChiShe {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#tanChiShe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* margin: 0 10px; */
}


.profile-right-title {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 800;
    margin: 20px 0;
    transition: transform 0.4s ease;
}

.profile-right-title-icon {
    margin-right: 8px;
    width: 26px;
    height: 26px;
    /* fill: #ffffff; */
    color: #000;
}

.profile-right-project {
    display: flex;
    justify-content: space-around;
    /* 子元素间距均匀分布 */
    flex-wrap: wrap; 
    /* 允许子元素换行 */
    margin-left: -20px;
    /* 去掉默认的左边距 */
}

.profile-right-project-item {
    /* margin: 28px 28px; */
    /* padding: 15px; */
}

.profile-right-svg {
    width: 100%;
    max-width: 880px;
    padding: 25px;
    padding-top: 12px;
    /* 去掉默认的外边距 */
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
    gap: 10px;
}

.profile-right-svg-img:hover {
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 1);
    /* 添加阴影效果 */
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    /* 平滑过渡效果 */
}


/* 遮罩层透明度样式 */
.dialog {
    backdrop-filter: blur(8px);
    /*  模糊背景 这里有个知识点是模糊要放在颜色前面才能避免延迟生效 */
    background-color: rgba(160, 186, 197, 0.5);
}

.dialog-container {
    width: 80%;
    max-width: 300px;
    min-height: 200px;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.dialog-img {
    width: 100%;
    height: 100%;
}


/* 手机设备 */
@media (max-width: 968px) {


    .profile-left {
        display: none;
    }

    .profile-right-hello {
        font-size: 8vw;
    }

    .gradientText {
        font-size: 8vw;
    }

    .profile-right-desc {
        font-size: 4vw;
    }
    .profile-right-project {
    justify-content: space-between;
    /* 手机设备子元素居中 */
    }

    .mx-auto {
        max-width: 290px;
    }

    .spanText {
        display: none;
    }

    .purpleText {
        font-size: 4vw;
    }

    .textBackground {
        font-size: 4vw;
    }

    .copyRight {
        display: none;
    }
}

/* pc设备 */
@media (min-width: 969px) {

    .profile-right-avatar {
        display: none;
    }

    .profile-right-hello {
        font-size: 60px;
    }

    .gradientText {
        font-size: 60px;
    }

    .profile-right-desc {
        font-size: 20px;
    }
    .profile-right-project {
    justify-content: space-around;
    /* pc设备子元素间距均匀分布 */
}
}
</style>